<!-- 底部商品入口 -->
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button type="primary" @click="handlerGetGoodList">添加商品</el-button>
      <el-row type="flex" class="top-bg" justify="space-between" align="center">
        <div>
          <span style="margin-right:10px">{{titles.mainTitle}}：{{titleDatas.title}}</span>
          <el-link>
            <i class="el-icon-edit" @click="handlerEditTitle('mainTitle',titleDatas.title)"></i>
          </el-link>

          <span
            style="margin-left:25px;margin-right:10px"
          >{{titles.subTitle}}：{{titleDatas.subTitle}}</span>
          <el-link>
            <i class="el-icon-edit" @click="handlerEditTitle('subTitle',titleDatas.subTitle)"></i>
          </el-link>
        </div>
      </el-row>
      <el-table
        v-loading="listLoading"
        :data="datas"
        style="width: 100%"
        highlight-current-row
        tooltip-effect="dark"
        fit
        border
        size="small"
      >
        <el-table-column label="序号" min-width="50px" align="center">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
        <el-table-column align="center" label="商品ID" min-width="150px">
          <template slot-scope="scope">{{scope.row.proId}}</template>
        </el-table-column>
        <el-table-column align="center" label="商品" min-width="300px">
          <template slot-scope="scope">
            <!-- <div style="width:20%;height:100%;align-items:start;display:flex"> -->
            <div style="align-items:start;display:flex">
              <div style="margin:1%;align-items:start;display:flex">
                <el-image style="width:100px; height:100px" :src="scope.row.imgUrl" lazy></el-image>
              </div>
              <!-- <div
                style="width:80%;height:100%;display:flex;flex-direction:column;align-items:start"
              >-->
              <div style="margin-top:1%;display:flex;flex-direction:column;align-items:start">
                <p style="display:block; height: 50%">名称：{{scope.row.infoName}}</p>
                <p style="display:block; height: 50%;">型号：{{scope.row.proType}}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="120px">
          <template slot-scope="{ row }">
            <div style="display:flex;flex-direction:column;align-items:center">
              <el-button
                size="small"
                align="center"
                type="primary"
                @click="handlerDealItem('deleteItem',row)"
                style="margin-bottom:10px"
              >{{deleteTitle.deleteItem}}</el-button>
              <el-button
                type="success"
                size="small"
                align="center"
                @click="handlerDealItem('obtainedItem',row)"
                style="margin:0px"
              >{{row.isShow=='1'?'下架':'上架'}}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        @pagination="getBottomData"
      />
      <!-- 标题修改弹窗 -->
      <el-dialog
        :title="titles[dialogTitle]+'修改'"
        :visible.sync="editVisible"
        width="width"
        append-to-body="true"
        @keyup.enter.native="handlerSure"
      >
        <div class="fliter-container">
          <!-- v-model="dialogTitle=='mainTitle'?titleDate.mainTitleMsg:titleDate.subTitleMsg" -->
          <el-input
            v-model="firstTitleMsg"
            small="small"
            type="text"
            auto-complete="off"
            class="filter-item"
          />
        </div>
        <div slot="footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlerSure">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 删除弹窗 -->
      <el-dialog
        :title="deleteTitle[deleteTitle.deleteDialogName]+'商品'"
        :visible.sync="deleteVisible"
        width="width"
        append-to-body="true"
      >
        <div>
          <span>{{deleteTitle.deleteTitleMsg}}</span>
        </div>
        <div slot="footer">
          <el-button @click="deleteVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlerDeleteItem">确 定</el-button>
        </div>
        <!-- 添加商品 -->
      </el-dialog>
      <el-dialog
        title="添加商品"
        :visible.sync="addVisible"
        width="80%"
        append-to-body
        :close-on-click-modal="false"
      >
        <div class="filter-container">
          <el-input
            v-model="listQuery.proCode"
            size="small"
            placeholder="商品编码"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            v-model="listQuery.goodsBrand"
            size="small"
            placeholder="商品品牌"
            style="width: 200px;margin-left:2%"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            v-model="listQuery.infoName"
            size="small"
            placeholder="商品名称"
            style="width: 200px;margin-left:2%"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <p style="display:inline-block;margin-left:2%">商品类型：</p>
          <el-select
            size="small"
            placeholder="全部"
            clearable
            class="filter-item"
            style="width: 130px"
            v-model="listQuery.catId"
          >
            <el-option v-for="item in deps" :key="item.id" :label="item.name" :value="item.catId" />
          </el-select>
          <el-button
            size="small"
            class="filter-item"
            type="success"
            icon="el-icon-search"
            @click="handleFilter"
          >搜索</el-button>
        </div>
        <el-table
          v-loading="listLoading"
          ref="multipleTable"
          :data="addGoodList"
          tooltip-effect="dark"
          style="width: 100%"
          :row-key="getRowKeys"
          border
          @selection-change="handleSelection"
        >
          <!-- @select-all="handleselectAll" -->
          <el-table-column type="selection" min-width="55" align="center"></el-table-column>

          <el-table-column label="商品编码" width="200px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.proCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品" min-width="200px" align="center">
            <template slot-scope="scope">
              <div style="dispaly:table;text-align:center;margin:0 auto;">
                <el-image
                  style="width:100px;height:100px;margin-right:10px;float:left;"
                  :src="scope.row.imageUrl"
                  lazy
                ></el-image>
                <div style="vertical-align:middle;display:table-cell;height:100px;">
                  <p align="left" style="margin-bottom:20px;">{{ scope.row.infoName }}</p>
                  <p align="left" style="margin-bottom:0px;">{{ scope.row.proType }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="销售价/市场价" min-width="200px" align="center">
            <template slot-scope="scope">
              <span>销售价：{{ scope.row.sellPrice }} | 市场价：{{scope.row.marketPrice}}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品品牌" width="150px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.goodsBrand}}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品类型" min-width="150px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.catName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品状态" min-width="150px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.status=='1'?'上架': (scope.row.status=='2'?'下架':'删除') }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalGoodList > 0"
          :total="totalGoodList"
          :page.sync="listQuery.start"
          :limit.sync="listQuery.length"
          @pagination="handlerGetGoodList"
        />
        <div slot="footer">
          <el-button @click="addVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlerAddGood">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; //
import {
  findClassifyByName,
  fixHotTitle,
  getHotGoodList,
  addGoodList,
  addGoods,
  goodsUpdate,
  searchGoods
} from "@/api/bottomCommodity";
export default {
  components: { Pagination },
  data() {
    return {
      total: 0,
      totalGoodList: 0,
      datas: [],
      listLoading: true,
      titleDatas: {
        title: "",
        subTitle: ""
      },
      //添加商品时的商品数据
      addGoodList: [],
      deleteTitle: {
        //商品操作请求的isShow
        dealNum: "",
        //商品操作dialog标题
        deleteDialogName: "",
        //商品操作dialog内容
        deleteTitleMsg: "",
        deleteItem: "删除",
        //商品操作-上架/下架
        obtainedItem: ""
      },
      //修改主标题的两个元素
      dialogTitle: "",
      firstTitleMsg: "",
      //分类数据
      depValue: "",
      deps: [],
      titles: {
        mainTitle: "主标题",
        subTitle: "副标题"
      },
      //修改标题dialog
      editVisible: false,
      //删除dialog
      deleteVisible: false,
      //添加商品dialog
      addVisible: false,
      //添加商品时需要的两个id
      ids: [],
      titleId: "",
      //删除/上架/下架--需要的id
      deleteId: "",
      multipleSelection: [],
      // 底部商品页码控制
      query: {
        pageNum: 1,
        pageSize: 10
      },
      //添加商品时的商品查询
      listQuery: {
        start: 1,
        length: 10,
        proCode: "",
        catId: "",
        goodsBrand: "",
        infoName: ""
      }
    };
  },
  created() {
    this.getBottomData();
  },
  methods: {
    // 获取底部商品数据
    getBottomData() {
      this.listLoading = true;
      var params = {
        pageNum: this.query.pageNum,
        pageSize: this.query.pageSize
      };
      getHotGoodList(params).then(response => {
        this.total = response.totalElements;
        this.titleDatas.title = response.content[0].title;
        this.titleDatas.subTitle = response.content[0].subTitle;
        this.titleId = response.content[0].id;
        this.datas = response.content[0].list;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    //标题编辑
    handlerEditTitle(title, msg) {
      this.dialogTitle = title;
      this.firstTitleMsg = msg;
      this.editVisible = true;
    },
    //确认标题修改
    handlerSure() {
      var params = {
        id: "",
        title: ""
      };
      this.dialogTitle == "mainTitle"
        ? (params = {
            id: this.titleId,
            title: this.firstTitleMsg
          })
        : (params = {
            id: this.titleId,
            subTitle: this.firstTitleMsg
          });
      fixHotTitle(params).then(response => {
        this.editVisible = false;
        this.dialogTitle == "mainTitle"
          ? (this.titleDatas.title = this.firstTitleMsg)
          : (this.titleDatas.subTitle = this.firstTitleMsg);
      });
    },
    //删除/下架事件弹窗
    handlerDealItem(title, row) {
      title == "deleteItem"
        ? (this.deleteTitle.deleteTitleMsg = "确定删除" + row.infoName + "?")
        : row.isShow == "0"
        ? ((this.deleteTitle.obtainedItem = "上架"),
          (this.deleteTitle.dealNum = "1"),
          (this.deleteTitle.deleteTitleMsg = "确定上架" + row.infoName + "?"))
        : ((this.deleteTitle.obtainedItem = "下架"),
          (this.deleteTitle.dealNum = "0"),
          (this.deleteTitle.deleteTitleMsg = "确定下架" + row.infoName + "?"));
      this.deleteId = row.hotId;
      this.deleteTitle.deleteDialogName = title;
      this.deleteVisible = true;
    },
    //删除/下架接口
    handlerDeleteItem() {
      this.listLoading = true;
      let isShow;
      this.deleteTitle.deleteDialogName == "deleteItem"
        ? (isShow = "2")
        : (isShow = this.deleteTitle.dealNum);
      //下架是0，删除是2,上架是1。
      // console.log(this.deleteTitle.deleteDialogName + "======>" + isShow);
      // console.log(this.deleteId);
      const formDate = new FormData();
      formDate.append("id", this.deleteId);
      formDate.append("isShow", isShow);
      goodsUpdate(formDate).then(response => {
        this.deleteVisible = false;
        this.getBottomData();
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    //添加商品时获取商品列表数据
    handlerGetGoodList() {
      this.listLoading = true;
      var params = {
        pageNum: this.listQuery.start,
        pageSize: this.listQuery.length
      };
      addGoodList(params).then(response => {
        this.addGoodList = response.content;
        this.totalGoodList = response.totalElements;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
      //商品分类
      findClassifyByName().then(response => {
        this.deps = response.data;
      });
      this.addVisible = true;
    },
    //    添加商品时的勾选处理
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    getRowKeys(row) {
      return row.proId;
    },
    //选中商品
    handleSelection(selection) {
      this.ids = [];
      this.multipleSelection = selection;
      this.multipleSelection.forEach(item => {
        this.ids.push(item.proId);
      });
    },
    //添加商品
    handlerAddGood() {
      this.listLoading = true;
      let idss = this.ids.join(",");
      const formDate = new FormData();
      formDate.append("ids", idss);
      formDate.append("titleId", this.titleId);
      addGoods(formDate).then(res => {
        if (res.code == "200") {
          this.addVisible = false;
          this.toggleSelection();
          this.getBottomData();
          setTimeout(() => {
            this.listLoading = false;
          }, 1.5 * 1000);
        } else {
          alert(res.msg);
          this.listLoading = false;
        }
      });
    },
    //全选函数  点击全选遍历当页数据若无添加,若是反选则删除(判断是否是全选还是反选)
    handleselectAll(selection) {
      this.addGoodList.forEach((row, index) => {
        if (this.ids.hasOwnProperty(row.id)) {
          selection.length ? null : delete this.ids[row.id];
        } else {
          this.ids[row.id] = row.id;
        }
      });
    },
    //搜索请求
    handleFilter() {
      if (
        this.listQuery.proCode == "" &&
        this.listQuery.catId == "" &&
        this.listQuery.goodsBrand == "" &&
        this.listQuery.infoName == ""
      ) {
        alert("搜索内容不能为空!");
      } else {
        this.listLoading = true;
        var params = {
          pageNum: this.listQuery.start,
          pageSize: this.listQuery.length,
          proCode: this.listQuery.proCode,
          catId: this.listQuery.catId,
          goodsBrand: this.listQuery.goodsBrand,
          infoName: this.listQuery.infoName
        };
        addGoodList(params).then(response => {
          this.addGoodList = response.content;
          this.totalGoodList = response.totalElements;
          setTimeout(() => {
            this.listLoading = false;
          }, 1.5 * 1000);
        });
      }
    }
  }
};
</script>

<style>
.top-bg {
  margin-top: 2%;
  width: 100%;
  padding: 15px;
  background-color: rgba(229, 231, 229, 0.705);
}
</style>